<template>
  <div class="chicon" v-if="oldchatlist.talk">
    <!-- 标题 -->
    <div class="settitle">
      <div class="setimg" @click="comback">
        <img src="../assets/imgs/iconse/左箭头.png" alt="" />
      </div>
      <div class="text">
        <h2>{{ oldchatlist.spname }}</h2>
      </div>
      <div class="sethome" @click="gohome">
        <img src="../assets/imgs/homelog.png" alt="" />
      </div>
    </div>

    <!-- 顶部功能按钮 -->
    <div class="topbtn">
      <div class="btn-top" @click="sendre">
        <p>发送简历</p>
      </div>
      <div class="btn-top" @click="creat">
        <p>修改简历</p>
      </div>
      <div class="btn-top" @click="myphone">
        <p>发送手机号</p>
      </div>
      <div class="btn-top" @click="giveUserid">
        <p>发送UID</p>
      </div>
    </div>

    <!-- 内容区域 -->
    <div class="boxt"></div>
    <div class="box" @click.stop="$router.back()" v-if="jcardLists">
      <div class="title">
        <p>{{ jcardLists[ind].title }}</p>
        <div class="timg" v-if="lists">
          <img :src="lists.srcs" alt="" />
        </div>
      </div>
      <div class="require">
        <p>{{ jcardLists[ind].place }}</p>
        <p v-for="(item, i) in jcardLists[ind].text" :key="i">
          {{ item }}
        </p>
      </div>
      <div class="payroll" v-if="lists">
        <p>{{ jcardLists[ind].paric }}</p>
        <div class="time">发布于{{ lists.tiem }}</div>
      </div>
    </div>

    <!-- 历史记录 -->
    <div class="record" v-if="!setspeak">
      <div class="chatlists">
        <!-- 我的消息 -->
        <div
          :class="[item.idname == 'my' ? 'myitem' : 'item']"
          v-for="(item, index) in oldchatlist.talk"
          :key="'old' + index"
        >
          <div class="text">
            <p>{{ item.text }}</p>
          </div>
          <div :class="[item.idname == 'my' ? 'myimgs' : 'imgs']">
            <img :src="item.srcs" alt="" />
          </div>
        </div>

        <!-- 对方消息 类名判断-->
        <!-- <div class="item">
          <div class="text">
            <p></p>
          </div>
          <div class="imgs">
            <img :src="src2" alt="" />
          </div>
        </div> -->

        <!-- 历史记录底部显示发送的简历 -->
      </div>
      <!-- 显示新建简历 -->
      <div class="myresume" v-if="showflag" @click="creat">
        <div class="mybox">
          <div class="myimg">
            <img src="../assets/imgs/icons/ic_launcher.png" alt="" />
          </div>
          <div class="mytext">
            <p>吃瓜者</p>
            <div class="text">
              <span>80分</span>
              <span>中文</span>
            </div>
          </div>
        </div>
      </div>
      <!-- 显示新建简历 END-->
      <p class="his">以上是历史记录</p>
    </div>

    <!-- 对话区域 -->
    <div class="chatlists">
      <!-- 设置问候语消息 -->
      <div class="myitem" v-if="setspeak">
        <div class="text">
          <p>{{ fristtalk}}</p>
        </div>
        <div class="myimgs">
          <img src="../assets/imgs/头像.jpg" alt="" />
        </div>
      </div>

      <!-- 我的消息 -->
      <div
        class="myitem"
        v-for="(item, index) in newchatlist"
        :key="index + '@#'"
      >
        <div class="text">
          <p>{{ item }}</p>
        </div>
        <div class="myimgs">
          <img src="../assets/imgs/头像.jpg" alt="" />
        </div>
      </div>
    </div>

    <!-- 显示新建简历 -->
    <div class="myresume" v-if="showinto" @click="creat">
      <div class="mybox">
        <div class="myimg">
          <img src="../assets/imgs/icons/ic_launcher.png" alt="" />
        </div>
        <div class="mytext">
          <p>吃瓜者</p>
          <div class="text">
            <span>80分</span>
            <span>中文</span>
          </div>
        </div>
      </div>
    </div>
    <!-- 显示新建简历 END-->

    <!--发送简历 -->

    <!-- 提示弹窗 -->
    <div class="aasi">
      <van-dialog
        v-model="show"
        message="请完善你的简历"
        show-cancel-button
        round-button
        confirm-button-text="回到主页"
        @confirm="gohome"
        confirm-button-color="#5c94f5"
      >
      </van-dialog>
    </div>

    <!-- 输入框 -->
    <div class="chatt"></div>
    <div class="chat">
      <input type="text" class="inp" v-model="value" @keydown.enter="add" />

      <!-- <div class="btn1">
        <span>发送简历</span>
      </div>
      <div class="btn2">
        <span>发送</span>
      </div> -->
    </div>
  </div>
</template>

<script>
import { getJobwantJsonData } from "../api/jobwant.js";
import { getBookmarkJsonData } from "../api/bookmark.js";
export default {
  data() {
    return {
      jcardLists: null, //求职信息2
      bookmarkLists: null, //求职信息1
      lists: null, //历史记录中对应的历史记录
      chatlist: null, //历史记录
      oldchatlist: null, //历史记录
      fristtalk: "你好", //自定义打招呼次
      newchatlist: [], //浅记录消息数组
      value: "", //输入框内容
      name: null, //对方名字
      src1: null, //对方头像
      src2: null, //用户头像
      showinto: false, //发送简历
      showflag: false, //显示历史记录的简历
      setspeak: false, //历史记录是否为空 并且 是否发送初次问候语
      show: false, //是否显示弹窗
      ids: 0, //bookmarkLists内id
      ind: 0, //jcardLists内下标
      chatindex: 0, //chatlist内下标
    };
  },
  methods: {
    getCardListsFun() {
      getJobwantJsonData().then((data) => {
        this.jcardLists = data.jcardLists;
      });
    },
    getBookmarListsFun() {
      getBookmarkJsonData().then((data) => {
        this.bookmarkLists = data.bookmark;
      });
    },
    getIdsFun() {
      this.ids = localStorage.getItem("ids");
      // console.log("getIdsFun2", this.ids);
    },

    getFristTalkFun() {
      if (localStorage.getItem("checktalk")) {
        let preins = JSON.parse(localStorage.getItem("Preins")); //获取预设列表

        if (localStorage.getItem("result")) {
          let result = localStorage.getItem("result"); //获取勾选id

          let under = preins.findIndex((item) => item.id == result); //查询id在列表中的位置

          this.fristtalk = preins[under].name; //将对应预设语句赋值到当前变量
        } else {
          console.log("this.fristtalk", this.fristtalk);
          return;
        }
      } else {
        return 0;
      }
    },

    getListsFun() {
      if (this.bookmarkLists && this.jcardLists) {
        this.ids = localStorage.getItem("ids");
        let index = this.bookmarkLists.findIndex((item) => item.id == this.ids);

        // 获取数据对应区域的数据
        this.lists = this.bookmarkLists[index];
        // console.log(this.lists);
      }
    },
    getIndFun() {
      if (this.bookmarkLists && this.jcardLists) {
        this.ids = localStorage.getItem("ids");
        let index = this.jcardLists.findIndex((item) => item.id == this.ids);
        this.ind = index;
        // console.log("getIndFun", index);
        // console.log("jcardLists", this.jcardLists[index]);
      }
    },

    getChatlistFun() {
      //获取聊天记录
      // 取出来用JSON.parse（）
      // 写入用JSON.stringify()

      this.ids = localStorage.getItem("ids");

      // 获取全部聊天记录
      this.chatlist = JSON.parse(localStorage.getItem("Chitchat"));
      let index = this.chatlist.findIndex((item) => item.userid == this.ids);
      this.chatindex = index; 
      this.oldchatlist = this.chatlist[index];
      this.showflag = this.oldchatlist.showflag;
      if (localStorage.getItem("checktalk")) {
        this.setspeak = this.oldchatlist.setspeak;
      }
      // console.log("oldchatlist22", this.oldchatlist.talk);
    },

    add() {
      //发送方法

      this.newchatlist.push(this.value);
      this.value = "";
      // console.log(this.chatlist[this.chatindex].user1[0].talk);
    },
    keppcode() {
      //保存记录方法

      if (this.showinto) {
        this.chatlist[this.chatindex].showflag = true;
      }

      let lists = this.oldchatlist.talk;

      // 将打招呼发送消息写进记录
      if(localStorage.getItem("checktalk") && this.setspeak){
        this.newchatlist.unshift(this.fristtalk);
      }

      for (let i = 0; i < this.newchatlist.length; i++) {
        lists.push({
          idname: "my",
          text: this.newchatlist[i],
          srcs: "../assets/imgs/头像.jpg",
        });
        // console.log("this.newchatlist[i]", this.newchatlist[i]);
      }

        this.chatlist[this.chatindex].talk = lists;

      // console.log("keppcodesddd",this.chatlist[this.chatindex].talk );
      // console.log((this.chatlist[this.chatindex].talk === []));
      if (!(this.chatlist[this.chatindex].talk.length==0) || localStorage.getItem("checktalk")) {
        //判断是否有历史记录
        // 关闭首次打招呼并打开历史记录
        this.chatlist[this.chatindex].setspeak = false;
      }

      localStorage.setItem("Chitchat", JSON.stringify(this.chatlist));

      // console.log("lists", lists);
      // console.log("oldchatlist", this.oldchatlist);
      // console.log("chatlist", this.chatlist);
    },
    comback() {
      //返回上一级方法并且保存

      this.keppcode(); //调动保存方法

      // 返回上一级
      this.$router.back();
    },
    gohome() {
      // 返回主页并且保存聊天记录

      // console.log(this.newchatlist);
      //获取聊天记录
      // 取出来用JSON.parse（）
      // 写入用JSON.stringify()

      this.keppcode(); //调动保存方法

      //返回主页并且上传聊天记录
      this.$router.push("home");
    },
    sendre() {
      //发送简历

      if (!localStorage.getItem("basic")) {
        this.show = true;
      } else {
        this.showinto = true;
      }
      // console.log(JSON.parse(localStorage.getItem("newlist")));
    },
    creat() {
      //修改简历按钮

      if (!localStorage.getItem("newlist")) {
        this.show = true;
      } else {
        this.keppcode(); //调动保存方法
        this.$router.push("creator");
      }
    },
    myphone() {
      //发送手机号

      if (!localStorage.getItem("newlist")) {
        this.show = true;
      } else {
        this.value = "你好我的手机号是:" + localStorage.getItem("phones");
      }
    },
    giveUserid() {
      //发送UID

      if (!localStorage.getItem("newlist")) {
        this.show = true;
      } else {
        this.value = "你好我的UID是:" + localStorage.getItem("userId");
      }
    },
  },
  created() {
    this.getCardListsFun();
    this.getBookmarListsFun();
    this.getIdsFun();
    this.getListsFun();
    this.getChatlistFun();
    this.getFristTalkFun();
  },
  watch: {
    bookmarkLists: function () {
      this.getListsFun();
      this.getIndFun();
    },
  },
};
</script>

<style lang="scss" scoped>
// 修改背景色

/*
.chicon {
  position: absolute;
  top: 0px;
  bottom: 0px;
  right: 0px;
  left: 0px;
  margin: auto;
  background-color: rgba(28, 143, 255, 0.3);
}
*/

// 弹窗内容样式
.aasi ::v-deep .van-dialog__message {
  font-size: 20px;
  padding: 50px 60px;
}

// 顶部导航栏目
.settitle {
  height: 60px;
  display: flex;
  align-items: center;
  background-color: #fff;
  position: fixed;
  width: 100%;
  top: 0px;
  right: 0px;
  left: 0px;
  margin: 0 auto;
  z-index: 199;
  box-shadow: 0px 0px 0px 1px rgba($color: #cccc, $alpha: 0.4);
  .setimg {
    height: 18px;
    position: absolute;
    left: 15px;
    img {
      height: 100%;
      display: block;
    }
  }
  .sethome {
    height: 28px;
    position: absolute;
    right: 25px;
    img {
      height: 100%;
      display: block;
    }
  }
  .text {
    margin: 0 auto;
    h2 {
      font-weight: 600;
    }
  }
}

// 顶部功能按钮
.topbtn {
  display: flex;
  position: fixed;
  width: 100%;
  top: 60px;
  height: 45px;
  line-height: 45px;
  text-align: center;
  background-color: #fff;
  z-index: 999;
  .btn-top {
    margin: 0 auto;
  }
}

//历史聊天记录
.record {
  text-align: center;
  .his {
    width: 100%;
    height: 30px;
    line-height: 30px;
    position: relative;
    &::after {
      content: "";
      display: block;
      position: absolute;
      width: 70px;
      height: 1px;
      background: #999;
      top: 0px;
      bottom: 0px;
      margin: auto 0;
      margin-right: 20%;
      right: 0px;
    }
    &::before {
      content: "";
      display: block;
      position: absolute;
      width: 70px;
      height: 1px;
      background: #999;
      top: 0px;
      bottom: 0px;
      margin: auto 0;
      margin-left: 20%;
      left: 0px;
    }
  }
}

// 聊天数据
.chatlists {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  .myitem {
    box-sizing: border-box;
    // width: 80%;
    border-radius: 9px;
    border-top-right-radius: 0px;
    border-top-left-radius: 20% 30px;
    border-bottom-right-radius: 0px;
    box-shadow: 0px 0px 5px #ccc;
    margin: 20px 0px;
    margin-left: 80px;
    padding: 20px 20px 10px;
    padding-right: 6px;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    background-color: rgba(242, 242, 242, 0.8);
    .text {
      align-self: center;
      flex: 1;
      padding: 8px 10px;
      background: rgba(244, 109, 55, 0.1);
      border-radius: 4px;
    }
    .myimgs {
      height: 45px;
      width: 45px;
      border-radius: 50%;
      overflow: hidden;
      margin-left: 30px;

      img {
        display: block;
        width: 100%;
        height: 100%;
      }
    }
  }
  .item {
    box-sizing: border-box;
    // width: 80%;
    border-radius: 9px;
    border-top-left-radius: 0px;
    border-top-right-radius: 20% 30px;
    border-bottom-left-radius: 0px;
    box-shadow: 0px 0px 5px #ccc;
    margin: 20px 0px;
    margin-right: 80px;
    padding: 20px 20px 10px;
    padding-left: 6px;
    display: flex;
    align-self: flex-start;
    align-items: flex-end;
    justify-content: flex-start;
    background-color: rgba(242, 242, 242, 0.8);
    flex-direction: row-reverse;
    .text {
      align-self: center;
      flex: 1;
      padding: 8px 10px;
      background: rgba(244, 109, 55, 0.1);
      border-radius: 4px;
    }
    .imgs {
      height: 45px;
      width: 45px;
      border-radius: 50%;
      overflow: hidden;
      margin-right: 30px;
      img {
        display: block;
        width: 100%;
        height: 100%;
      }
    }
  }
}

/*创建简历后*/
.myresume {
  height: 200px;
  box-sizing: border-box;
  margin: 50px 20px;
  position: relative;
  // border: 1px solid #000;
  .mybtn {
    position: absolute;
    width: 60px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    font-size: 20px;
    color: #39a9ed;
    top: 80px;
    right: 15px;
    z-index: 100;
    background-color: rgba(83, 142, 246, 0.3);
    border-radius: 10px;
  }
  .mybox {
    height: 130px;
    display: flex;
    padding: 30px;
    padding-bottom: 0px;
    box-shadow: 0px 0px 10px #ccc;
    background-color: #f2f2f2;
    position: relative;
    &::after {
      content: "已经为你创建好了简历可以点击查看";
      width: 80%;
      height: 30px;
      line-height: 30px;
      display: block;
      text-indent: 30px;
      border-radius: 10px;
      position: absolute;
      bottom: 13px;
      right: 0px;
      left: 0px;
      margin: 0 auto;
      color: #333;
      background-color: rgba(57, 169, 237, 0.5);
    }
    .myimg {
      height: 80px;
      width: 80px;
      border-radius: 10px;
      overflow: hidden;
      img {
        display: block;
        height: 100%;
      }
    }
    .mytext {
      font-size: 26px;
      margin-left: 30px;
      .text {
        font-size: 12px;
        margin-top: 10px;
        span {
          display: inline-block;
          margin-right: 10px;
          background-color: #54a1ef;
          padding: 2px 6px;
          color: #f2f2f2;
          border-radius: 4px;
        }
      }
    }
  }
}

// 顶部第一模块
.boxt {
  margin-top: 120px;
}
.box {
  background-color: #fefefe;
  margin: 0px 40px;
  padding-bottom: 20px;
  border-radius: 10px;
  margin-bottom: 60px;
  box-shadow: 0px 0px 8px 2px #f2f2f2;
  /*标题*/
  .title {
    height: 60px;
    line-height: 60px;
    font-size: 20px;
    color: #333;
    font-weight: 800;
    position: relative;
    box-sizing: border-box;
    padding: 0px 20px;
    p {
      width: 80%;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .timg {
      height: 40px;
      width: 40px;
      position: absolute;
      overflow: hidden;
      border-radius: 50%;
      top: 0px;
      bottom: 0px;
      right: 20px;
      margin: auto 0;
      img {
        display: block;
        width: 100%;
      }
    }
  }

  /*要求*/
  .require {
    display: flex;
    font-size: 15px;
    margin-left: 10px;
    flex-wrap: wrap;
    p {
      padding: 0px 10px;
      margin: 5px 0px;
      border-right: 1px solid #ccc;
      &:nth-last-child(1) {
        border-right: 0px;
      }
    }
  }

  /*薪资*/
  .payroll {
    display: flex;
    font-size: 15px;
    margin: 0px 10px;
    margin-top: 20px;
    justify-content: space-between;
    p {
      padding: 0px 10px;
      font-size: 20px;
      color: #f46d37;
      font-weight: 600;
    }
    .time {
      padding: 0px 10px;
      font-size: 12px;
      color: #999;
    }
  }
}

// 底部输入框
.chatt {
  height: 80px;
}
.chat {
  position: fixed;
  width: 100%;
  bottom: 0px;
  height: 80px;
  //   background-color: aqua;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  background-color: #efefef;
  border-top-right-radius: 30px;
  border-top-left-radius: 30px;
  .inp {
    box-sizing: border-box;
    padding: 5px 10px;
    border: 0px;
    background: #fefefe;
    height: 40px;
    flex: 1;
    margin: 0px 50px;
    width: 70%;
    border-radius: 10px;
    font-size: 20px;
    box-shadow: 0px 0px 8px 2px #eee;
  }

  /*
  .btn2 { //按钮废案
    font-size: 16px;
    padding: 2px 4px;
    text-align: center;
    background: rgba(244, 109, 55, 0.3);
    border-radius: 5px;
    // flex:0 0 30px;
    // margin-right: 15px;
    // margin-left: 15px;
    color: rgba(254, 254, 254, 0.8);
    box-shadow: 0px 0px 8px 2px #ccc;
  }
  .btn1 { //按钮废案
    font-size: 16px;
    padding: 2px 4px;
    text-align: center;
    background: rgba(244, 109, 55, 0.3);
    border-radius: 5px;
    margin-right: 10px;
    margin-left: 10px;
    // flex: 0 0 80px;

    // margin-right: 15px;
    // margin-left: 5px;
    color: #333;
    box-shadow: 0px 0px 8px 2px #eee;
  }
  */
}
</style>